<template>
    <i :class="classes" :style="styles"></i>
</template>

<script>
export default {
  name: 'm-icon',
  props: {
    type: {
      type: String,
      required: true,
    },
    color: {
      type: String,
    },
    size: {
      type: Number,
    },
  },
  data () {
    return {}
  },
  computed: {
    classes () {
      return [
        'm-icon',
        `icon-${this.type}`
      ]
    },
    styles () {
      const style = {}
      if (this.color) {
        style.color = this.color
      }
      if (this.size) {
        style.fontSize = `${this.size}px`
      }
      return style
    },
  }
}
</script>

<style>
/*.m-icon {*/
  /*color: #5c6b77;*/
  /*font-size: 16px;*/
/*}*/
</style>
